<template>
  <view class="detail">
    <view
      style="
        width: 100%;
        padding: 30rpx;
        background-color: #fff;
        box-sizing: border-box;
      "
    >
      <view
        style="
          width: 100%;
          text-align: center;
          margin-top: 80rpx;
          margin-bottom: 30rpx;
        "
      >
        详情
      </view>

      <video
        id="myVideo"
        :src="videofile"
        autoplay
        loop
        muted
        :controls="false"
        :show-play-btn="false"
        :enable-play-gesture="false"
        @loadedmetadata="handleVideoReady"
        style="width: 100%; height: 60vh"
        @click="handleCheck()"
      ></video>
      <view>{{ name }}</view>
      <view style="color: #b3b3b3; font-size: 30rpx">
        {{ description }}
      </view>
    </view>

    <button
      style="width: 100%"
      open-type="share"
      class="share-btn"
      @click="handleShare()"
    >
      <van-icon name="share-o" size="40rpx" />
    </button>

    <!-- 视频播放 -->
    <view
      v-if="isPhoto"
      style="
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 9;
      "
    >
      <view
        style="
          width: 100%;
          position: absolute;
          top: 42rpx;
          left: 42rpx;
          z-index: 2;
        "
      >
        <van-icon
          style="width: 42rpx; font-size: 42rpx; margin: 16rpx; color: #fff"
          name="cross"
          @click="closeVideo()"
        />
      </view>
      <video
        style="width: 100%; height: 100%"
        :src="videofile"
        controls
        autoplay
      ></video>
    </view>
  </view>
</template>

<script>
import { videoInfo } from '@/api/index'

export default {
  components: {},
  data() {
    return {
      id: '',
      cover: '',
      videofile: '',
      name: '',
      description: '',

      // 是否展示视频
      isPhoto: false,
    }
  },

  onLoad() {
    // iOS隐藏首页按钮
    wx.hideHomeButton()
  },

  onShareAppMessage() {
    return {
      title: this.name,
      path: `/pages/components/detail?id=${encodeURIComponent(this.id)}`,
      imageUrl: this.cover,
    }
  },

  onLoad(query) {
    this.id = query.id || ''
    // 如果是从分享进入，只有id参数，需要调用接口获取详情
    if (this.id) {
      this.getVideoDetail()
    } else {
      // 如果不是从分享进入，直接使用传入的参数
      this.cover = query.cover || ''
      this.videofile = query.videofile || ''
      this.name = query.name || ''
      this.description = query.description || ''
    }
  },

  methods: {
    // 转发按钮
    handleShare() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession', // 分享到聊天界面
        type: 'link',
        title: this.name,
        path: '/pages/components/detail?id=' + encodeURIComponent(this.id),
        imageUrl: this.cover,
        success: (res) => {
          console.log('分享成功', res)
        },
        fail: (err) => {
          console.log('分享失败', err)
        },
      })
    },

    // 获取视频详情
    async getVideoDetail() {
      try {
        const resp = await videoInfo({ video_id: this.id })

        if (resp.code === 200) {
          const data = resp.data
          this.cover = data.cover
          this.videofile = data.videofile
          this.name = data.name
          this.description = data.description
        }
      } catch (error) {
        console.error('获取视频详情失败', error)
      }
    },

    handleVideoReady() {
      // iOS 必须用户交互后才能播放，但 muted 的视频可自动播放
      const videoContext = uni.createVideoContext('myVideo', this)
      videoContext.play()
    },

    // 打开视频
    handleCheck() {
      this.isPhoto = true
    },

    // 关闭视频
    closeVideo() {
      this.isPhoto = false
    },
  },
}
</script>

<style scoped>
.detail {
  width: 100%;
  height: 100vh;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: scroll;
}
</style>
